Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

Add HTML Content To div Using AngularJS

Hi All, Making a webpage dynamic , you need to add/remove control from you HTML file. Building web application containing multi data entry fields is only possible if your web application is working dynamically with controls. In this case, you ...

Sharing Data Between Controllers in AngularJS

Hi All, To share data between two controller you should have your factory return an object and let your controllers work with a reference to the same object: A simple example in which two controllers are sharing name of a user. TEST.html...

How to bind application data to attributes of HTML DOM elements?

The following directives are used to bind application data to attributes of HTML DOM elements: 1.ng-disabled Directive:-    This directive is used to disable any attribute (button,checkbox,etc).     Add ng-disabled...

Changing button text (toggle text) on click in AngularJS

We can make a button behave like a toggling button by making a directive in AngularJS. It is very simple. You just need to bind the attribute and then check the condition. First create a simple HTML :- <html> <head> ...

Redirect to a new page/url in AngularJS

We use $location service or $window to redirect to a new URL. $location exposes the URL to the browsers address bar and makes it available to the application. It reflects the changes either side ,i.e. synchronizes the changes and maintains it bet...

AngularJS - $interpolate, $compile and $parse

There are three useful services provided by AngularJS for view rendering and evaluating expression which it uses internally. $interpolate :- This service simply takes a string and is used to evaluate expressions. We can run the entire string...

Angular $q,promises and deferred.

Promises are logics that are executed after any function is completed.  In AngularJS, promises are provided by the in-built $q service. It executes asynchronous functions by registering them with the promise object.   Deferred helps ...

What is $rootScope and how is it related with $scope?

$rootscope is the parent of all scopes. Values exposed there will be used in all controllers and templates. It acts as a parent object of all “$scope” angular objects created in a web page. Now, let us understand how the “$ro...

How to populate options in select in angularjs with example

The dynamically generated option in the select box with angularjs is done with the following code : We can populate the options inside the select box and on selecting any value from the select box it reflect to some event. It will sh...

AngularJS http (ajax)

AngularJS has provided a $http service that works as an ajax call in jquery. It performs a function of reading data from the server. $http makes a call to the database and retrieves the desired data or records. How to use? 1. you need to in...

What problems does AngularJS solves?

AngularJS is a framework ( client-side ) for web applications that embeds HTML, CSS and Javascript. It basically focuses on:- 1.Coding data access, Reading, form validations - are some functions in which many people are not good at while doing...

$watch() , $digest() and $apply() in AngularJS

There is an important concept of angularjs $scope function like: $watch $digest  $apply  As to understand angularjs more better we have to go throught the central function in angularjs. Lets discuss them one by one: ...

Different ways of using array filters in AngularJS

AngularJS provides a filter feature to format input value and an array based on certain criteria. Here, we will see the ways of array filtering. For example-below is the array:- $scope.movies = [ {id: 1,title: Airlift, genre: real ...

AngularJS $apply

AngularJS $apply comes into play when it invokes digest cycle to watch the scope model changes. Angular wraps the function call within the $scope.$apply. It means it executes a complete new life cycle. If the execution of the function is normal, ...

AngularJS $digest

Since AngularJS has a popular concept of two way data binding. But how does it comes to know that a value has changed? Here comes the role of $digest.    AngularJS executes in cycles which is called as $digest cycle. Suppose we ch...

Understanding Angular $watch

AngularJS has a concept of powerful data binding. It accomplishes this by keeping a watch on its scope variables. When we change the the variable on $scope object, the $scope object gets automatically changed and vice-versa. Most of the time angu...

AngularJS $timeout and $interval

$timeout and $interval are two AngularJS timer services. We use these services to call functions and these are similar to javascript’s setTimeout and setInterval functions. $timeout- This is used to call a function and schedules a single c...

Iterate json data in angularJS

While working for an autocomplete funtionality in angularJS encountered a problem where instead of the JSON we need to iterate each element and have to make an Array of string. For iterating the JSON data(from server side), we used: $scop...

AngularJS expressions

Expressions in AngularJS is represented using double curly braces-{{ }}. Expressions are used to bind  the data to the HTML in the same way as the ng-bind directive of angular. Expressions using- 1.numbers:- syntax- <p>Price...

Understanding Angular UI-Router

In Angular we are provided with a routing framework named Angular UI-Router. It enables us to make transitions based on states rather than routes URL (which is used in ngRoute),i.e. it is organized around states. It supports nested states and mul...

MVC architecture in angular

Model View Controller is abbreviated as MVC. MVC is the popular web design architecture because it separates the business logic from its view or presentation. It has three components:- Model- an object carrying data. View- visualization ...

Single Page Applications using Angular

Single page applications are the applications that separates the model and the view layer i.e, model layer handles the data and view layer reads from the models. SPA’s are becoming popular because it retrieves all the code(JS,HTML,CSS) on ...

AngularJS Dependency Injection in detail

Dependency Injection allows the removal of hard-coded dependencies and makes it possible to change them. It helps in making components testable,reusable and maintainable. We are provided with in built dependency injection mechanism by AngularJs....

Promises in Angularjs

Promises - AngularJS's promise provides a built-in service $q. It provide a way to execute asynchronous call in series by registering it with a promise object. Let us now elaborate promise and deferred. Deferred - It represent the ...

AngularJS Otherwise function

Hi Readers, Today, I will be discussing about the Otherwise Function available in $routeProvider in AngularJS. The main objective of this function is to redirect the end users to a particular route when the user by mistake or intentionally...

AngularJS Dependency Injection

Dependency Injection (DI):- It is a software design pattern and its main motive is to see how components get its dependencies Injector subsystem in AngularJS is liable for creating components, dependencies resolving and also providing othe...

Bootstrapping process in AngularJS

Hi Readers, Today, I will be discussing about the "Bootstrapping" in AngularJS. AngularJS is a JavaScript framework. Everyone knows that we have dependency injection in AngularJS but at what time does dependency injection actually gets exe...

AngularJS Basic, Value, Service, Factory & Provider Example and description

Hi Readers, I recently got my attention to new JavaScript framework that is AngularJS. I read lots of articles about it but I usually do not understand anything just by reading about it. I am more about the practical person and can not actuall...

Generate Dynamic Table content by using form fields in AngularJs

Generate Dynamic Table content by using form fields in AngularJs We all know that "AngularJs" is adopting vastly. We already found so many example of AngularJs and Application in AngularJS. We had created an example of "AngularJs" relate ...

How to use custom filters in our code in AngularJS

Filter is one of the important part in angularJS. There are many default filters like: 1. uppercase 2. lowercase 3. orderby etc. We can use these filter simply by adding a pipe character (|) in the expression. Now we will discuss a custom ...

How to Add and Remove items in array using AngularJS

With the help of Angularjs, We can dynamically add or remove list items in an array. It is shown In the example given below.     Addition of the list items is done using 'push' method and removal of the item is done...

Registering services using Service in Angular.js

Hello All In today's blog post we would discuss the aspect of registering your custom services with AngularJS. It is essential to understand what are AngularJS services. Services: Angular services are objects that are packed together us...

Registering Service using value in angularJS

A service is created by a service factory and service factories are functions which are created by a service provider(constructor function). When instantiating service provider, there must be a property named $get, which holds service factory ...

How to use ng-src

Hi all, Here is an example, to how to use ng-src. It is basically used to use a path or source in a tag. If we are not using the ng-src then we will get just a path on our page on. controller.Js var socialApp= angular.module('socialApp...

Tutorial 3 - AngularJS Filter

Hi all, In angularJs filters are use to change and modify the data. We can use multi filter using pipe (|). Below is some example of filters- 1) uppercase 2) lowercase 3) currency 4) filter 5) orderby Uppercase :- Uppercase fi...

Tutorial 2- AngularJS Directives

Hi all, In this we will discuss about Directives. Directives are core features of AngularJS. Directive is introduced as a new syntax. They are markers on a DOM element which have a special behavior to it. Just for an example only HTML don't...

How to use RouteProvider in AngularJS

With the help of Routing method we can divide our application in logical views and bind different view to controllers". In below example we have use first config() method to define $route Provider configuration. Also in the same file we defined t...

Directives in Angular Js

AngularJS directives are what controls the rendering of the HTML inside an AngularJS application, it also lets you to extends HTML by adding the directives. In angular js directives are represented by prefix ng- Some of the mostly used di...

Declaring modules in Angularjs

A module is a container for different part of an App which includes controller, services, filters, directives and many more. We can also say that it is a collection of controllers, filters, services, directives, etc. Syntax for creating a m...

Formatting currency using Angular

Hi all, Here is an example how to format currency using Angular filters. Formats a number as a currency (ie $1,234.56). When no currency symbol is provided, default symbol for current locale is used. - AngularJS HTML:- <body ng...

Removing data from a list on click using angular

Hi all, Below is an example to remove names from a list using ng-click. Here is a simple form for editing, adding or removing user name, all of these methods are declared on the controller. These methods can easily be called from the angul...

looping list using ng-repeat

Hi folks, The below example will demonstrate how to do looping over lists in templates using ng-repeat. <html ng-app="nameApp"> <head> <meta charset="utf-8"> <title>Angular.js Example</title> ...

Initializing the model using an Angular controller

Hi all, Below example will demonstrate, How to Initializing the model using an Angular controller, defined with a global function. <html ng-app="nameApp"> <head> <meta charset="utf-8"> <title>Angular.js ...

How to disable previous dates in datepicker using JS?

Here the problem is you want to show the passed dates but make them disabled. jQuery(document).ready(function() { $('#sandbox-container').datepicker({ format: "dd/mm/yyyy", clearBtn: true, minDate: 0, maxDate: "+1M +10D", da...
prev 1 2 next
Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: